<template>
	<view class="container">
		<view class="img">
			<image src="../../static/signup/1.jpeg"></image>
		</view>
		<view class="con">
			<h2>百合驾校</h2>
			<p>地址：陕西省西安市碑林区</p>
			<view class="praise">
				口碑好
			</view>
			<view class="praise">
				规模大
			</view>
			<view class="praise">
				有接送
			</view>
		</view>
		<view class="no"></view>
		<view class="chara">
			<h2>—特色班型—</h2>
			<view class="detail" v-for="(items,indexs) in persons" :key="indexs">
				<p>C1C2{{items.name}}<text @click="todetails">{{items.price}}</text></p>
				<view class="sise">
					免费接送
				</view>
				<view class="sise">
					学生优惠
				</view>
			</view>
			<!-- <view class="detail">
				<p>C1C2必过班<text>￥3899</text></p>
				<view class="sise">
					专人专车
				</view>
				<view class="sise">
					考试包过
				</view>
			</view> -->
			
		</view>
		<view class="no"></view>
		<view class="warp">
			<view class="model_box">
				<view class="model_title">教练团队</view>
						<view class="model_scrollx flex_row">
							<scroll-view class="uni-swiper-tab" scroll-x :style="'height:'+scrollH+'px'">
								<view class="scrollx_items tg_zdtg">
									<image src="../../static/signup/111.jpeg" mode=""></image>
									<view class="tgyx_title">夏芳</view>
									<view class="tgyx_desc">教龄8年</view>
								</view>
								<view class="scrollx_items tg_hot">
									<image src="../../static/signup/222.jpeg" mode=""></image>
									<view class="tgyx_title">郭永清</view>
									<view class="tgyx_desc">教龄7年</view>
								</view>
								<view class="scrollx_items tg_zshy">
									<image src="../../static/signup/333.jpeg" mode=""></image>
									<view class="tgyx_title">袁艺菲</view>
									<view class="tgyx_desc">教龄5年</view>
								</view>
								<view class="scrollx_items tg_hjhy">
									<image src="../../static/signup/444.jpeg" mode=""></image>
									<view class="tgyx_title">刘一凡</view>
									<view class="tgyx_desc">教龄1年</view>
								</view>
							</scroll-view>
							
						</view>
			</view>
	
		</view>
	
	</view>
</template>

<script>
	export default{
		data(){
			return {
						scrollH: 130,
						persons:[
							{name:"特惠班",price:"￥1399"},
							{name:"普通班",price:"￥1899"},
							{name:"必过班",price:"￥2899"},
						],
					};
		},
		onLoad(options){
						uni.getSystemInfo({
						　　success: function(res) { // res - 各种参数
						　　    let info = uni.createSelectorQuery().select(".scrollx_items");
						　　　  　info.boundingClientRect(function(data) { //data - 各种参数
						　　　  　console.log(data.height)  // 获取元素宽度
									this.scrollH = data.height
						　　    }).exec()
						       }
						});
		
		},
		methods: {
			
			todetails(){
				uni.navigateTo({
					url:"/pages/signup/enlist"
				})
			}
		}
	}
</script>

<style>
	.img,.img>image{
		width: 100%;
		height: 350rpx;
	}
	.con{
		width: 100%;
		height: 200rpx;
	}
	.con>h2{
		font-size: 40rpx;
		margin-left: 30rpx;
		margin-top: 50rpx;
		
	}
	.con>p{
		margin-top: 30rpx;
		margin-left: 30rpx;
	
	}
	.no{
		width: 100%;
		height: 20rpx;
		background-color: #eee;
	}
	.praise{
		width: 100rpx;
		height: 40rpx;
		border: 1rpx solid  black;
		float: left;
		font-size: 25rpx;
		line-height: 40rpx;
		padding-left: 40rpx;
		color: #C0C0C0;
		margin-left: 30rpx;
		margin-top: 30rpx;
	}
	.chara{
		width: 100%;
		
	}
	.chara>h2{
		font-size: 40rpx;
		width: 100%;
		height: 40rpx;
		margin: 30rpx 30%;
	
	}
	.detail{
		width: 100%;
		height: 100rpx;
		border-bottom: 1rpx solid #C0C0C0;
	}
	.detail>p{
		margin-left: 50rpx;
		margin-top: 20rpx;
		height: 60rpx;
	}
	.detail p>text{
		margin-left: 500rpx;
		margin-bottom: 300rpx;
		font-size: 45rpx;
		color:#00BFFF;
	}
	.detail .sise{
		width: 120rpx;
		height: 33rpx;
		border: 1rpx solid black;
		font-size: 25rpx;
		color:#00BFFF;
		margin-left: 50rpx;
		margin-bottom: 25rpx;
		padding-left: 20rpx;
		float: left;
	}
	.model_title{
		width: 100%;
		margin-left: 300rpx;
		margin-top: 30rpx;
	}
	/* 左右滑动 */
		.uni-swiper-tab{
			white-space: nowrap;
		}
		.model_scrollx{
			justify-content: space-between;
			padding: 40rpx 0;
		}
		.scrollx_items{
			padding: 0rpx 20rpx;
			text-align: center;
			display: inline-block;
			width: 210rpx;
			box-sizing: border-box;
			margin-left: 30rpx;
			
		}
		.scrollx_items:last-child{
			margin-right: 30rpx;
		}
		.scrollx_items image{
			width: 150rpx;
			height: 150rpx;
			border-radius: 50%;
		}
		.tgyx_title{
			font-size: 28rpx;
			color: #333333;
			/* margin-top: 30rpx; */
		}
		.tgyx_desc{
			font-size: 24rpx;
			/* margin-top: 10rpx; */
		}
		.tg_zdtg{
			background: linear-gradient(bottom right, #d5e4fa, #dae7fb);
			color: #477cd3;
		}
		.tg_hot{background: linear-gradient(bottom right, #fffcec, #fbf6d9);color: #ffa800;}
		.tg_zshy{background: linear-gradient(bottom right, #fdf7fe, #f9e5fe);color: #c559de;}
		.tg_hjhy{background: linear-gradient(bottom right, #fff8f0, #fff0df);color: #f3791f;}
</style>